<template>
  <div style="font-size: 1.5rem;color: grey; text-align: left; margin: 7px 0">政务工作人员</div>
  <el-table :data="administrativeStaff" stripe style="width: 60%">
    <el-table-column prop="departId" label="一级部门"/>
    <el-table-column prop="secondId" label="二级部门"/>
    <el-table-column prop="nickName" label="用户名"/>
    <el-table-column prop="job" label="职位"/>
    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="roleId" label="用户角色"/>
    <el-table-column label="处理意见" width="200px">
      <template #default="scope">
        <el-input placeholder="请输入处理意见" v-model="scope.row.checkResult"/>
      </template>
    </el-table-column>
    <el-table-column label="是否同意" width="200px">
      <template #default="scope">
        <el-radio-group v-model="scope.row.state" size="large">
          <el-radio-button type="primary" label="同意"/>
          <el-radio-button label="不同意"/>
        </el-radio-group>
      </template>
    </el-table-column>
  </el-table>
  <el-button style="margin-top: 10px" type="primary" @click="feedback(administrativeStaff)">一键提交</el-button>

  <hr style="margin: 20px 0; width: 60%">

  <div style="font-size: 1.5rem;color: grey; text-align: left; margin: 7px 0">自然人</div>
  <el-table :data="naturalPerson" stripe>
    <el-table-column prop="idCardNum" label="省份证号码"/>
    <el-table-column prop="mobileNum" label="手机号码"/>
    <el-table-column prop="emailNum" label="邮箱地址"/>
    <el-table-column prop="qqNum" label="QQ号码"/>
    <el-table-column prop="familyAddr" label="家庭住址"/>
    <el-table-column prop="insuranceCardNum" label="社保卡号"/>
    <el-table-column prop="nickName" label="用户名"/>
    <el-table-column prop="roleId" label="用户角色"/>
    <el-table-column label="处理意见">
      <template #default="scope">
        <el-input placeholder="请输入处理意见" v-model="scope.row.checkResult"/>
      </template>
    </el-table-column>
    <el-table-column label="是否同意">
      <template #default="scope">
        <el-radio-group v-model="scope.row.state" size="large">
          <el-radio-button type="primary" label="同意"/>
          <el-radio-button label="不同意"/>
        </el-radio-group>
      </template>
    </el-table-column>
  </el-table>
  <el-button style="margin-top: 10px" type="primary" @click="feedback(naturalPerson)">一键提交</el-button>


  <hr style="margin: 20px 0;">

  <div style="font-size: 1.5rem;color: grey; text-align: left; margin: 7px 0">企业用户</div>
  <el-table :data="businessUsers" stripe style="width: 60%">
    <el-table-column prop="companyName" label="企业名称"/>
    <el-table-column prop="creditNum" label="企业社会信用号码"/>
    <el-table-column prop="roleId" label="用户角色"/>
    <el-table-column label="处理意见">
      <template #default="scope">
        <el-input placeholder="请输入处理意见" v-model="scope.row.checkResult"/>
      </template>
    </el-table-column>
    <el-table-column label="是否同意">
      <template #default="scope">
        <el-radio-group v-model="scope.row.state" size="large">
          <el-radio-button type="primary" label="同意"/>
          <el-radio-button label="不同意"/>
        </el-radio-group>
      </template>
    </el-table-column>
  </el-table>
  <el-button style="margin-top: 10px" type="primary" @click="feedback(businessUsers)">一键提交</el-button>
</template>

<script setup lang="ts">

import axios from "axios";
import {computed, ref} from "vue";

interface review_type {
  userId: number,
  nickName: string,
  userKind: number,
  roleId?: number,
  companyName?: string,
  creditNum?: string,
  departId?: number,
  secondId?: number,
  idCardNum?: string,
  mobileNum?: string,
  emailNum?: string,
  qqNum?: string,
  familyAddr?: string,
  insuranceCardNum?: string,

  checkResult: string,
  state: string,
  job?: string,
  name?: string
}

const reviewData = ref<review_type[]>();
const role : string[]= [
  '数据产品消费者',
  '源数据提供者',
  '数据产品加工者',
  '监管者',
  '系统管理员'
]

axios.get('http://127.0.0.1:8089/api/info/register_review')
    .then(resp => {
      if (resp.status == 200) {
        for (const respElement of resp.data) {
          respElement.roleId = role[respElement.roleId]
        }
        reviewData.value = resp.data;
        console.log(
          reviewData.value
        )
      }
    })

const dynamicComputed = (i: number) => {
  const ans: review_type[] = []
  reviewData.value?.map((d) => {
    if (d.userKind === i)
      ans.push(d);
  })
  return ans;
}

const administrativeStaff = computed(() => {
  return dynamicComputed(0)
})

const naturalPerson = computed(() => {
  return dynamicComputed(1)
})

const businessUsers = computed(() => {
  return dynamicComputed(2);
})

const feedback = (data: review_type[]) => {
  console.log(data);
  const feedData = Object.create(null);
  for (let d of data) {
    feedData[d.userId] = {
      checkResult: d.checkResult,
      state: d.state === "同意" ? 1 : -1
    }
  }

  axios.post("http://127.0.0.1:8089/api/admin/review", feedData, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(resp => {
    console.log(resp.data);
    for (let idx in data) {
      for (let dx in reviewData.value) {
        if (reviewData.value[Number(dx)].userId === data[idx].userId)
          reviewData.value.splice(Number(dx), 1);
      }
    }
  })
}

</script>

<style scoped>

</style>